Micron Document
Fox's Git Mirrors

Node / rns-mirrors / micron-parser-js.git rns://e35de29a61974cd952fde3fe9c8500d5/rns-mirrors/micron-parser-js.git


-─
Micron Parser JS
-
This repository provides a JavaScript parser for Micron, a lightweight, terminal-friendly markdown format used

Requirements

Micron Parser JS requires DOMpurify for HTML/XSS sanitization. To install DOMpurify, include it with your script tags above micron-parser.js or install via a package manager like NPM T383838npm install micron-parser


Usage

T282828
// Import Micron Parser (requires modules)
import MicronParser from './js/micron-parser.js';

// Create a new parser (darkTheme = true/false | defaults to true, forceMonospace = true/false | defaults to true)
const parser = new MicronParser(true, true);

// Input Micron markup
const micronMarkup = \\`
> Example Heading
-∿
This is a simple line in Micron.
# This line is a comment and won't appear in the output.
\\`;

// Convert Micron to an HTML string
const htmlOutput = parser.convertMicronToHtml(micronMarkup);

// Insert it into your page
document.getElementById('yourElement').innerHTML = htmlOutput;

// Or create a DocumentFragment from Micron
const domFragment = parser.convertMicronToFragment(micronMarkup);
// and append it to the DOM
document.body.appendChild(domFragment);

Partials

Micron-parser-js supports embedded partials The syntax is BT383838 {urlT383838refreshfields} BT383838 where refreshT383838 is the seconds between reloads (must be >= 1T383838) and fieldsT383838 is a |T383838-separated list. A pid=<id>field gives the partial a stable identity for tracking across refreshes.

The parser emits a placeholder T383838<div class="Mu-partial">â§–</div> with all the parsed metadata as T383838data-* attributes. Wire it up with T383838MicronParser.bindPartials(root, fetcher, options?) in your application logic:

T282828
const root = document.getElementById('output');
root.innerHTML = parser.convertMicronToHtml(micronMarkup);

const cleanup = MicronParser.bindPartials(root, async ({ destination, fields, id, signal }) => {
const res = await fetch(\\`/proxy?path=${encodeURIComponent(destination)}\\`, { signal });
return await res.text(); // returned as innerHTML; may also return a Node or { markup: string }
});

// when the view is torn down:
cleanup();

Best practices

For optimal display of Micron content in the browser it's recommended to use a monospaced font with NerdFont icon support, such as the ones provided here.




Served by rngit 1.4.1 - Generated in 0.04s